<script setup lang="ts">
import type { Area } from '@/utils/area'
import { ref } from 'vue'

//1.地址
const address = ref<AddressItem>({} as AddressItem)

//2.选择地区
const areaColums = ref<Area[]>([])

const showLocationPopup = ref(false)

const data = mk.getArea()
areaColums.value = JSON.parse(data)

const onSelectedLocation = (data: { selectedValues: number }) => {
  if (!address.value) return
  address.value.provinceCode = data.selectedValues
}
</script>

<template>
  <div class="address-edit-page">
    <van-cell-group>
      <van-field label="收货人" placeholder="请输入收货人"></van-field>
      <van-field label="手机号码" placeholder="请输入手机号码"></van-field>
      <van-field label="所在地区" placeholder="请输入所在地区" readonly></van-field>
      <van-field
        label="详细地址"
        type="textarea"
        placeholder="请输入详细地址"
        @click="showLocationPopup = true"
      >
      </van-field>
      <van-field label="设为默认地址" readonly>
        <template #extra>
          <van-checkbox :icon-size="20" checked-color="var(--mk-red)"></van-checkbox>
        </template>
      </van-field>
    </van-cell-group>
    <div class="submit">
      <van-button round block type="primary"> 保存 </van-button>
    </div>
    <VanPopup v-model:show="showLocationPopup" position="bottom">
      <VanPicker :columns="areaColums"></VanPicker>
    </VanPopup>
  </div>
</template>

<style lang="css" scoped>
.address-edit-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  height: 80px;
}

.geo {
  width: 250px;
  height: 250px;
  overflow-y: auto;
}

.geo-title {
  font-size: 14px;
  color: var(--mk-gray);
  padding: 8px;
}

.geo-item {
  border-top: 0.5px solid var(--mk-under);
  padding: 8px;
}

.geo-item-label {
  font-size: 14px;
  color: var(--mk-red);
}

.geo-item-value {
  font-size: 12px;
  color: var(--mk-gray);
}
</style>
